<template>
  <div>
    <el-dialog
      title="新增"
      :visible.sync="dialogVisible"
      width="30%"
      :close-on-click-modal="false"
      :before-close="handleClose"
    >
      <div>
        <el-form
          :label-position="labelPosition"
          label-width="110px"
          :model="formLabelAlign"
          ref="myForm"
        >
          <el-form-item
            label="名称"
            prop="tagName"
            :rules="[
              {
                required: true,
                message: '名称不能为空',
                trigger: 'blur',
              },
            ]"
          >
            <el-input v-model="formLabelAlign.tagName"></el-input>
          </el-form-item>
          <el-form-item
            label="code值"
            prop="tagCode"
            :rules="[
              {
                required: true,
                message: 'code值为英文和数字',
                trigger: 'blur',
              },
              { validator: validateCode, trigger: 'blur' },
            ]"
          >
            <el-input v-model="formLabelAlign.tagCode"></el-input>
          </el-form-item>
          <el-form-item
            label="排序"
            prop="tagSort"
            :rules="[
              {
                required: true,
                message: '排序值不能为空',
                trigger: 'blur',
              },
              { validator: validateSort, trigger: 'blur' },
            ]"
          >
            <el-input v-model="formLabelAlign.tagSort"></el-input>
          </el-form-item>
          <el-form-item
            v-if="flagCode"
            label="标签标记类型"
            prop="tagAutoVlaue"
            :rules="[
              {
                required: true,
                message: '类型不能为空',
                trigger: 'blur',
              },
            ]"
          >
            <el-select
              style="width: 415px"
              v-model="formLabelAlign.tagAutoVlaue"
              placeholder="请选择"
            >
              <el-option
                v-for="item in tagAutoFlagOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="flagCode" label="状态">
            <el-switch
              class="switchStyle"
              v-model="formLabelAlign.tagStatue"
              active-text="ON"
              inactive-text="OFF"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-value="0"
              inactive-value="2"
              @change="handleSwitchChange"
            >
            </el-switch>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmitTagDefine">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { tagDefineEdit } from "@/api/students/organization/consult";
import store from "@/store";
export default {
  data() {
    return {
      dialogVisible: false,
      labelPosition: "right",
      formLabelAlign: {
        tagName: "",
        tagCode: "",
        tagSort: "",
        tagAutoVlaue: "",
        tagStatue: "0",
      },
      tagType: "",
      groupData: null,
      categoriesList: null,
      tabName: "A",
      tagAutoFlagOption: [
        {
          value: "1",
          label: "自动标签标记",
        },
        {
          value: "2",
          label: "手动标签标记",
        },
      ],
      flagCode: false,
    };
  },
  methods: {
    init(type, groupData, categoriesList, tabName) {
      this.clear();
      this.dialogVisible = true;
      this.tagType = type;
      this.categoriesList = categoriesList;
      this.groupData = groupData;
      this.tabName = tabName;
      if (type !== 3) {
        this.flagCode = false;
      } else {
        this.flagCode = true;
      }
    },
    handleSwitchChange(value) {
      this.formLabelAlign.startFlag = value;
    },
    // code值
    validateCode(rule, value, callback) {
      if (!/^[a-zA-Z0-9]*$/.test(value)) {
        callback(new Error("请输入正确的code值"));
      } else {
        // 校验通过时手动调用callback()来清除错误提示
        callback();
      }
    },
    validateName(rule, value, callback) {
      if (!/^[\u4e00-\u9fa5]*$/.test(value)) {
        callback(new Error("请输入正确的名称"));
      } else {
        callback();
      }
    },
    validateSort(rule, value, callback) {
      if (!/^[0-9]*$/.test(value)) {
        callback(new Error("请输入正确的排序值"));
      } else {
        callback();
      }
    },
    onSubmitTagDefine() {
      // 传参
      if (this.tagType === 1) {
        const params = {
          parentId: this.tabName,
          tagGroupId: this.tabName,
          userId: store.getters.user_id.toString(),
          token: store.getters.token.toString(),
          tagName: this.formLabelAlign.tagName,
          tagCode: this.formLabelAlign.tagCode,
          tagSort: this.formLabelAlign.tagSort,
          tagType: "2",
          tagAutoFlag: this.formLabelAlign.tagAutoVlaue,
          tagStatue: 1,
        };
        tagDefineEdit(params)
          .then((result) => {
            if (result.result === true) {
              // 如果编辑成功，关闭弹框并触发初始化数据的事件
              this.dialogVisible = false;
              this.$emit("initData");
            } else {
              // 如果编辑失败，显示错误信息并关闭弹框
              this.$message.error(result.resultdata);
              this.dialogVisible = false; // 确保在关闭之前设置为 false
            }
          })
          .catch((error) => {
            // 捕获请求错误并显示错误信息
            this.dialogVisible = false; // 确保在请求失败时也能关闭弹框
          });
      } else if (this.tagType === 3) {
        const params = {
          parentId: this.categoriesList.id,
          tagGroupId: this.tabName,
          userId: store.getters.user_id.toString(),
          token: store.getters.token.toString(),
          tagName: this.formLabelAlign.tagName,
          tagSort: this.formLabelAlign.tagSort,
          tagType: "3",
          tagCode: this.formLabelAlign.tagCode,
          tagAutoFlag: this.formLabelAlign.tagAutoVlaue,
          tagStatue: this.formLabelAlign.tagStatue,
        };
        tagDefineEdit(params)
          .then((result) => {
            if (result.result === true) {
              this.dialogVisible = false;
              this.$emit("getTagList");
            } else {
              this.$message.error(result.resultdata);
              this.dialogVisible = false;
            }
          })
          .catch((error) => {
            this.dialogVisible = false;
          });
      }
    },
    handleClose() {
      const form = this.$refs.myForm;

      // 确保form实例存在并调用resetFields方法
      if (form && typeof form.resetFields === "function") {
        form.resetFields();
      }
      this.dialogVisible = false;
    },
    clear() {
      this.formLabelAlign.tagName = "";
      this.formLabelAlign.tagCode = "";
      this.formLabelAlign.tagSort = "";
      this.formLabelAlign.tagAutoVlaue = "";
      this.formLabelAlign.tagStatue = "0"
    },
  },
};
</script>

<style scoped>
::v-deep .el-dialog {
  margin-top: 15vh !important;
}
.switchStyle /deep/ .el-switch__label {
    position: absolute;
    display: none;
    color: #fff;
  }
 >>>.el-switch__core{
    background-color: rgba(166, 166, 166, 1) ;
  }
  .switchStyle /deep/ .el-switch__label--left {
    z-index: 9;
    left: 20px;
  }
  .switchStyle  /deep/ .el-switch__label--right {
    z-index: 9;
    left: 4px;
  }
  .switchStyle  /deep/ .el-switch__label.is-active {
    display: block;
  }
  >>>.el-switch__core{
    width: 3.125vw !important;
  }
  >>>.el-switch.is-checked .el-switch__core{
    width: 3.125vw !important;
  }
</style>